<template>
  <div id="comment">
    <div class="com-tit van-hairline--bottom">
      <h3>评价</h3>
      <span>200+</span>
      <van-icon name="arrow" />
    </div>
    <div class="com-body">
      <div class="com-item van-hairline--bottom">
        <div class="com-user">
          <div class="com-user-avatar">
            <van-image
              round
              width="1.25rem"
              height="1.25rem"
              src="http://storage.360buyimg.com/i.imageUpload/38373335333933383531353136383034313539363435_sma.jpg"
            />
          </div>
          <div class="com-usernickname">
            <span>si***45</span>
          </div>
          <div class="user-rate">
            <van-rate v-model="star"
            size="10px"
            gutter="2px"
            readonly
             />
          </div>
          <div class="com-date">
            <span>2014-08-23</span>
          </div>
        </div>
        <div class="cont">
          <p>
            很好的东西。。。。。。
          </p>
          <div class="cont-img">
            <span class="img">
              <img src="https://img30.360buyimg.com/shaidan/s128x96_jfs/t241/317/1200789809/52235/e341df27/53f80bf6Nc6db2b87.jpg!cc_100x100!q70.dpg.webp" alt="">
            </span>
            <span class="img">
              <img src="https://img30.360buyimg.com/shaidan/s128x96_jfs/t241/317/1200789809/52235/e341df27/53f80bf6Nc6db2b87.jpg!cc_100x100!q70.dpg.webp" alt="">
            </span>
            <span class="img">
              <img src="https://img30.360buyimg.com/shaidan/s128x96_jfs/t241/317/1200789809/52235/e341df27/53f80bf6Nc6db2b87.jpg!cc_100x100!q70.dpg.webp" alt="">
            </span>
          </div>
        </div>
      </div>
       <div class="com-item van-hairline--bottom">
        <div class="com-user">
          <div class="com-user-avatar">
            <van-image
              round
              width="1.25rem"
              height="1.25rem"
              src="http://storage.360buyimg.com/i.imageUpload/38373335333933383531353136383034313539363435_sma.jpg"
            />
          </div>
          <div class="com-usernickname">
            <span>si***45</span>
          </div>
          <div class="user-rate">
            <van-rate v-model="star"
            size="10px"
            gutter="2px"
            readonly
             />
          </div>
          <div class="com-date">
            <span>2014-08-23</span>
          </div>
        </div>
        <div class="cont">
          <p>
            很好的东西。。。。。。
          </p>
          <div class="cont-img">
            <span class="img">
              <img src="https://img30.360buyimg.com/shaidan/s128x96_jfs/t241/317/1200789809/52235/e341df27/53f80bf6Nc6db2b87.jpg!cc_100x100!q70.dpg.webp" alt="">
            </span>
            <span class="img">
              <img src="https://img30.360buyimg.com/shaidan/s128x96_jfs/t241/317/1200789809/52235/e341df27/53f80bf6Nc6db2b87.jpg!cc_100x100!q70.dpg.webp" alt="">
            </span>
            <span class="img">
              <img src="https://img30.360buyimg.com/shaidan/s128x96_jfs/t241/317/1200789809/52235/e341df27/53f80bf6Nc6db2b87.jpg!cc_100x100!q70.dpg.webp" alt="">
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
   data() {
    return {
      star: 5,

    };
  },
}
</script>
<style lang="scss" scoped>
#comment {
  padding: 0 1.13rem;
  .com-tit {
    position: relative;
    height: 2.81rem;
    line-height: 2.81rem;
    color: #262626;
    padding-left: 0.5rem;
    margin-top: 0.19rem;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.19rem;
      height: 0.94rem;
      background-image: linear-gradient(180deg, #f5503a, #fad1cb);
    }
    h3 {
      margin: 0;
      font-size: 1rem;
      display: inline;
    }
    > span {
      padding-left: 0.63rem;
      font-size: 0.75rem;
    }
    .van-icon {
      float: right;
      line-height: 2.81rem;
    }
  }
  .com-body {
    .com-item {
      .com-user {
        display: flex;
        .com-user-avatar {
             .van-image{
               top:1px;
             }
        }
        .com-usernickname{
          font-size: 12px;
          line-height: 24px;
          margin-left: 10px;
        }
        .user-rate{
          margin-left:10px ;
          .van-rate{
              padding: 6px 0;
          }
        }
        .com-date{
           margin-left: auto;
          >span{
             font-size: 12px;
             line-height: 24px;
             color: #ccc;
          }
        }
      }
      .cont{
        p{
          font-size: 12px;
        }
        .cont-img{
          .img{
            padding: 2px;
          img{
            width: 80px;
            height: 80px;
            border-radius: 5px;
          }
          }
        }
      }
    }
  }
}
</style>